<template>
    <a-drawer
    :title="title"
    placement="right"
    width='70%'
    :maskStyle='maskStyle'
    :closable="true"
    v-model:visible="visible"
    :after-visible-change="afterVisibleChange"
  >
      <!-- <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p> -->
    </a-drawer>
</template>
<script lang='ts'>
import {ref,toRefs,reactive} from 'vue'
export default {
   props: {  //接收子组件传值
    title: String,
    visible:Boolean
  },
    setup(props:object,cex:any){ //接收子组件传值
      const state = reactive({
            maskStyle:{
              "background-color": "rgba(0, 0, 0, 0)"
            }
      })
      const afterVisibleChange=(val:boolean)=>{//子组件给父亲的方法
         cex.emit('afterVisibleChange',val)
      };
      return {
        ...toRefs(state),afterVisibleChange,props
      }
    }
}
</script>
<style lang="less" scoped>


</style>